<style lang="scss">
	.van-checkbox {
		padding: .1rem;
	}

	.save-plan {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		align-items: center;
		justify-content: center;
		background-color: #179afe;
		font-size: 0.3rem;
		color: #ffffff;
		z-index: 99;
	}
</style>

<template>
	<div class="container hasNav hasTabbar">
		<van-nav-bar title="服务策划" left-arrow left-text="返回" @click-left="$router.back()" fixed></van-nav-bar>
		<van-form @submit="sendFn">
			<van-field name="sourceofNo" label="号源来源">
				<template slot="input">
					<van-checkbox-group v-model="form.sourceofNo" direction="horizontal">
						<van-checkbox v-for="(item,index) in source" :name="item" :key="index" shape="square">{{item}}
						</van-checkbox>
					</van-checkbox-group>
				</template>
			</van-field>
			<van-field name="chKnowCustomer" label="了解客户">
				<template slot="input">
					<van-checkbox-group v-model="form.chKnowCustomer" direction="horizontal">
						<van-checkbox v-for="(item,index) in knowCustomer" :name="item.value" :key="index"
							shape="square">{{item.name}}</van-checkbox>
					</van-checkbox-group>
				</template>
			</van-field>
			<van-field name="chCommunicationCustomer" label="沟通客户">
				<template slot="input">
					<van-checkbox-group v-model="form.chCommunicationCustomer" direction="horizontal">
						<van-checkbox v-for="(item,index) in communicationCustomer" :name="item.value" :key="index"
							shape="square">{{item.name}}</van-checkbox>
					</van-checkbox-group>
				</template>
			</van-field>
			<van-field name="chDataTransfer" label="资料交接">
				<template slot="input">
					<van-checkbox-group v-model="form.chDataTransfer" direction="horizontal">
						<van-checkbox v-for="(item,index) in dataTransfer" :name="item.value" :key="index"
							shape="square">{{item.name}}</van-checkbox>
					</van-checkbox-group>
				</template>
			</van-field>
			<van-field v-model="form.chDataTransferOtherText" name="chDataTransferOtherText" label="交接备注"
				type="textarea" rows="2" colon maxlength="200" show-word-limit placeholder="请输入资料交接备注"></van-field>

			<van-field name="chKnowHospital" label="了解医院">
				<template slot="input">
					<van-checkbox-group v-model="form.chKnowHospital" direction="horizontal">
						<van-checkbox v-for="(item,index) in knowHospital" :name="item.value" :key="index"
							shape="square">{{item.name}}</van-checkbox>
					</van-checkbox-group>
				</template>
			</van-field>
			<van-field v-model="form.chKnowHospitalInspectText" name="chKnowHospitalInspectText" label="医院备注"
				type="textarea" rows="2" colon maxlength="200" show-word-limit placeholder="请输入医院备注"></van-field>
			<van-field name="chKnowExpert" label="了解医院">
				<template slot="input">
					<van-checkbox-group v-model="form.chKnowExpert" direction="horizontal">
						<van-checkbox v-for="(item,index) in knowExpert" :name="item.value" :key="index" shape="square">
							{{item.name}}
						</van-checkbox>
					</van-checkbox-group>
				</template>
			</van-field>
			<van-field name="chCommunicationExpert" label="沟通专家">
				<template slot="input">
					<van-checkbox-group v-model="form.chCommunicationExpert" direction="horizontal">
						<van-checkbox v-for="(item,index) in communicationExpert" :name="item.value" :key="index"
							shape="square">{{item.name}}</van-checkbox>
					</van-checkbox-group>
				</template>
			</van-field>
			<van-field name="chGoodsReady" label="物品准备">
				<template slot="input">
					<van-checkbox-group v-model="form.chGoodsReady" direction="horizontal">
						<van-checkbox v-for="(item,index) in goodsReady" :name="item.value" :key="index" shape="square">
							{{item.name}}
						</van-checkbox>
					</van-checkbox-group>
				</template>
			</van-field>
			<van-field name="chScheduling" label="行程安排">
				<template slot="input">
					<van-checkbox-group v-model="form.chScheduling" direction="horizontal">
						<van-checkbox v-for="(item,index) in scheduling" :name="item.value" :key="index" shape="square">
							{{item.name}}
						</van-checkbox>
					</van-checkbox-group>
				</template>
			</van-field>
			<van-field name="chOffSiteVisitDoctor" label="异地就医">
				<template slot="input">
					<van-checkbox-group v-model="form.chOffSiteVisitDoctor" direction="horizontal">
						<van-checkbox v-for="(item,index) in offSiteVisitDoctor" :name="item.value" :key="index"
							shape="square">{{item.name}}</van-checkbox>
					</van-checkbox-group>
				</template>
			</van-field>
			<van-field name="chOther" label="其他">
				<template slot="input">
					<van-checkbox-group v-model="form.chOther" direction="horizontal">
						<van-checkbox v-for="(item,index) in other" :name="item.value" :key="index" shape="square">
							{{item.name}}
						</van-checkbox>
					</van-checkbox-group>
				</template>
			</van-field>
			<van-field v-model="form.chSpecificRequire" name="chSpecificRequire" label="客户特殊要求及应对" type="textarea"
				rows="2" colon maxlength="200" show-word-limit placeholder="请输入客户特殊要求及应对"></van-field>
			<van-field v-model="form.chMaybeRisk" name="chMaybeRisk" label="可能存在的风险点" type="textarea" rows="2" colon
				maxlength="200" show-word-limit placeholder="请输入可能存在的风险点"></van-field>
			<van-field v-model="form.chRiskMeasure" name="chRiskMeasure" label="风险点应对措施" type="textarea" rows="2" colon
				maxlength="200" show-word-limit placeholder="请输入风险点应对措施"></van-field>
			<div class="save-plan" @click="sendFn">保存</div>
		</van-form>
		<loading :isShow="loading"></loading>
	</div>
</template>

<script>
	import Loading from '../../components/Loading';
	import {
		getPlan,
		savePlan
	} from '../../api/order';

	const strKey = ['chKnowHospitalInspectText', 'chDataTransferOtherText', 'chSpecificRequire', 'chMaybeRisk',
		'chRiskMeasure'
	];

	export default {
		name: 'Plan',
		components: {
			Loading
		},
		data() {
			const {
				id
			} = this.$route.query;

			return {
				loading: false,
				id,
				source: ['网上预约', '医生加号', '现场挂号', '提前看诊', '提前检查', '不需要安排号源'],
				knowCustomer: [{
						name: '初诊复诊',
						value: 'chuFuZhen'
					},
					{
						name: '脾性',
						value: 'disposition'
					},
					{
						name: '出行方式',
						value: 'tripMode'
					},
					{
						name: '支付方式',
						value: 'payMode'
					}
				],
				communicationCustomer: [{
						name: '资料准备（医保卡、病历本等看诊相关资料）',
						value: 'dataReady'
					},
					{
						name: '注意事项（看诊时间地点，是否需要空腹，是否需要憋尿等）',
						value: 'attention'
					},
					{
						name: '告知停车位情况（VIP客户）',
						value: 'parkingSpace'
					}
				],
				dataTransfer: [{
						name: '病历本',
						value: 'notes'
					},
					{
						name: '医保卡/就诊卡',
						value: 'card'
					},
					{
						name: '挂号单',
						value: 'registry'
					},
					{
						name: '发票清单',
						value: 'invoice'
					},
					{
						name: '报告单',
						value: 'report'
					},
					{
						name: '检查单（是否缴费，是否排期）',
						value: 'inspect'
					}
				],
				knowHospital: [{
						name: '熟悉医院环境（比如挂号处，缴费处，检查室，输液室及各科室位置）',
						value: 'environment'
					},
					{
						name: '熟悉看诊流程',
						value: 'inspection'
					},
					{
						name: '熟悉检查事项',
						value: 'examine'
					}
				],
				knowExpert: [{
						name: '看诊习惯',
						value: 'habit'
					},
					{
						name: '看诊态度',
						value: 'attitude'
					},
					{
						name: '是否合作',
						value: 'cooperation'
					}
				],
				goodsReady: [{
						name: '零钱',
						value: 'change'
					},
					{
						name: '纸巾/湿纸巾',
						value: 'tissue'
					},
					{
						name: '雨伞',
						value: 'umbrella'
					},
					{
						name: '水',
						value: 'water'
					},
					{
						name: '小玩具（针对小朋友看诊）',
						value: 'toy'
					}
				],
				communicationExpert: [{
						name: '是否确认出诊',
						value: 'visit'
					},
					{
						name: '诊前沟通',
						value: 'communication'
					},
					{
						name: '是否告知激励',
						value: 'stimulate'
					}
				],
				scheduling: [{
						name: '出发时间',
						value: 'goOff'
					},
					{
						name: '交通工具',
						value: 'traffic'
					},
					{
						name: '路线',
						value: 'path'
					}
				],
				offSiteVisitDoctor: [{
					name: '客户行程安排（到达城市时间、交通工具、住宿情况、陪同情况）',
					value: 'scheduling'
				}],
				other: [{
						name: '已准备相关保健知识',
						value: 'healthKnowledge'
					},
					{
						name: '已了解要有服务意识（陪诊要礼貌，不允许发呆、走神、玩手机，离开的时候要跟客户打招呼）',
						value: 'serviceAwareness'
					},
					{
						name: '已了解良好的职业形象的要求（仪表，仪容，发型，服饰，饰品，着装等）',
						value: 'professionalImage'
					}
				],
				form: {
					sourceofNo: [],
					chKnowCustomer: [],
					chCommunicationCustomer: [],
					chDataTransfer: [],
					chDataTransferOtherText: '',
					chKnowHospital: [],
					chKnowHospitalInspectText: '',
					chKnowExpert: [],
					chCommunicationExpert: [],
					chGoodsReady: [],
					chScheduling: [],
					chOffSiteVisitDoctor: [],
					chOther: [],
					chSpecificRequire: '',
					chMaybeRisk: '',
					chRiskMeasure: ''
				}
			}
		},
		async beforeMount() {
			await this.getPlanDetail();
		},
		methods: {
			async getPlanDetail() {
				try {
					this.loading = true;

					const {
						errorcode,
						errormsg,
						servicePlan
					} = await getPlan({
						recordId: this.id
					});

					if (errorcode == 0) {
						for (const key in servicePlan) {
							if (Object.hasOwnProperty.call(servicePlan, key)) {
								if (!strKey.includes(key)) {
									this.form[key] = servicePlan[key].split(',');
								} else {
									this.form[key] = servicePlan[key];
								}
							}
						}

						this.$nextTick(() => {
							this.loading = false;
						});
					} else {
						this.$toast(errormsg);
						this.loading = false;
					}
				} catch (error) {
					console.log(error);
					this.loading = false;
				}
			},
			async sendFn() {
				try {
					let params = {
						recordId: this.id
					};

					for (const key in this.form) {
						if (Object.hasOwnProperty.call(this.form, key)) {
							if (!strKey.includes(key)) {
								params[key] = this.form[key].join(',');
							} else {
								params[key] = this.form[key];
							}
						}
					}

					const {
						errorcode,
						errormsg
					} = await savePlan(params);

					if (errorcode == 0) {
						this.$toast('保存成功');
						this.getPlanDetail();
					} else {
						this.$toast(errormsg);
					}
				} catch (error) {
					console.log(error);
				}
			}
		}
	}
</script>
